<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>用户详情</title>
    <meta name="viewport" content="width=device-width,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <style type="text/css">
        body{font-size:16px;background-color:#e3e3e3;}
        .none{display:none;}
        .sea-content{position:relative;background-color:#DD2121;padding:10px;z-index:1;}
        .rightArrow{position:absolute;z-index:2;top:19px;right:10px;width:0;height:0;font-size:0;border-style:dashed dashed dashed solid;border-width:12px;border-color:#fff transparent transparent transparent;}
        .rightArrow:after{content:'';border-color:#DD2121 transparent transparent transparent;border-width:10px;border-style:dashed dashed dashed solid;font-size:0;position:absolute;top:-12px;left:-10px;}
        .sea-frame{line-height:30px;background-color:#fff;border-radius:5px;text-align:center;width:90%;}
        #listTab{background-color:#fff;margin-bottom:10px;}
        #listTab th{height:40px;background-color:#ECECEC;}
        #listTab th,#listTab td{text-align:center;}
        #listTab td{height:40px;border-bottom:1px #ECECEC solid;}
        .putc{position:relative;z-index:1;width:90%;}
        .searchBtn{width:30px;height:30px;background:url(images/search_07.png) #ECECEC no-repeat center center;
        position:absolute;right:40px;border-radius:0 5px 5px 0;z-index:3;background-size:15px;}
        .sea-term{margin-bottom:10px;display:-webkit-box;-webkit-box-align:center;-webkit-box-pack:center;-webkit-box-orient:horizontal;}
        .sea-term span{-webkit-box-flex:1;display:block;text-align:center;height:30px;line-height:30px;}
        .selectTerm{border-bottom:2px #DD2121 solid;font-weight:bold;}

        #scrollWapper{position:relative;}
        #scroller{}
        #pullDown,#pullUp{text-align:center;font-size:14px;height:40px;line-height:40px;}
    </style>
</head>
<body>
    <section id="userMessage">
        <div class="search">
            <div class="sea-content">
                <div class="putc">
                    <input type="text"  class="sea-frame" placeholder="搜索" />
                    <i class="searchBtn none"></i>
                </div>

                <span class="rightArrow"></span>
            </div>
            <div class="sea-term" style="display:none;">
                <span class="selectTerm" data-c="0">姓名</span><span data-c="1">电话</span><span data-c="2">日期</span>
            </div>
        </div>
        <div id="scrollWapper">
            <div id="scroller">
            <div id="pullDown">
                下拉刷新
            </div>
        <table width="100%" cellpadding="0" cellspacing="0" id="listTab">
            <thead>
                <tr><th>姓名</th><th>电话</th><th>日期</th></tr>
            </thead>
            <tbody>
            <tr>
                <td>Kevintan</td><td>13526265485</td><td>2015-09-10</td>
            </tr>
            <tr>
                <td>Kevintan</td><td>13526265485</td><td>2015-09-11</td>
            </tr>
            <tr>
                <td>Kevintan</td><td>13526265485</td><td>2015-09-12</td>
            </tr><tr>
            <td>Kevintan</td><td>13526265485</td><td>2015-09-13</td>
        </tr>
            <tr>
                <td>Kevintan</td><td>13526265485</td><td>2015-09-14</td>
            </tr>
            <tr>
                <td>Kevintan</td><td>13526265485</td><td>2015-09-15</td>
            </tr>
            <tr>
                <td>Kevintan</td><td>13526265485</td><td>2015-09-16</td>
            </tr>
            <tr>
                <td>Kevintan</td><td>13526265485</td><td>2015-09-17</td>
            </tr>
            <tr>
                <td>Kevintan</td><td>13526265485</td><td>2015-09-18</td>
            </tr>
            <tr>
                <td>Kevintan</td><td>13526265485</td><td>2015-09-19</td>
            </tr>
            <tr>
                <td>Kevintan</td><td>13526265485</td><td>2015-09-20</td>
            </tr>
            <tr>
                <td>Kevintan</td><td>13526265485</td><td>2015-09-20</td>
            </tr>
            <tr>
                <td>Kevintan</td><td>13526265485</td><td>2015-09-20</td>
            </tr>
            <tr>
                <td>Kevintan</td><td>13526265485</td><td>2015-09-20</td>
            </tr>
            <tr>
                <td>Kevintan</td><td>13526265485</td><td>2015-09-20</td>
            </tr>
            <tr>
                <td>Kevintan</td><td>13526265485</td><td>2015-09-20</td>
            </tr><tr>
                <td>Kevintan</td><td>13526265485</td><td>2015-09-20</td>
            </tr>
            <tr>
                <td>Kevintan</td><td>13526265485</td><td>2015-09-20</td>
            </tr>
            <tr>
                <td>Kevintan</td><td>13526265485</td><td>2015-09-20</td>
            </tr>

            </tbody>

        </table>
            <div id="pullUp">上啦加载更多</div>
        </div>
            </div>
    </section>
</body>
</html>
<script type="text/javascript" src="js/jquery/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="js/scroll.js"></script>
<script>
    function loadedEvents() {
        $('.rightArrow').on('click', function () {
            var term = $('.sea-term');
            term.toggle('slow');
        });

        $('.sea-term span').click(function () {
            var _this = $(this);
            _this.addClass('selectTerm').siblings().removeClass('selectTerm');
        })

        $('.sea-frame').on('focus', function () {
            $('.searchBtn').removeClass('none');
        })

        $('.sea-frame').on('blur', function () {
            $('.searchBtn').addClass('none');
        })
    }

    (function($){
        loadedEvents();
        _Scroll.init('scrollWapper',{onBeforUpDownFlat:true,touchmoveDownFn:function(_this){
            setTimeout(function(){
                _this.pullDown.innerText = '下拉刷新';
                _this.options.transY = _this.options.pulldownOffsetHeight;
                _this.refresh();
            },2000);
        }});
        this.showData = function(){
            var datac = $('.selectTerm').attr('data-c');
            var json=[{name:'kevintan',phone:'13526265859',time:'2015-05-12'},{name:'kevintan',phone:'13526265859',time:'2015-05-12'},{name:'kevintan',phone:'13526265859',time:'2015-05-12'},{name:'kevintan',phone:'13526265859',time:'2015-05-12'}];
            var tr = '';
            for(var l in json)
            {
                var item = json[l];
                tr+'<tr><td>'+item.name+'</td><td>'+item.phone+'</td><td>'+ +'</td></tr>';
            }
            /*$.ajax({
                type:'post',
                url:'',
                data:{term:datac},
                dataType:'json',
                success:function(res){

                }
            });*/
        }
    })(jQuery);

</script>